<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>
</head>
<body>
<!--<p  id="p1">-->
    <!--<span>p1</span>-->
    <!--<a href="">p1链接</a>-->
<!--</p>-->
<!--<p   id="p2">p2</p>-->

</body>
 <script>
     var ToDoItem = Backbone.Model.extend({});
     var toDoItem = new ToDoItem({
         'title':'task1',
         'description':'没有'
     });
     var toDoItem2 = new ToDoItem({
         'title':'task2',
         'description':'没有2'
     });
     var ToDoItemView = Backbone.View.extend({
         //初始化
         tagName:'div',
         className: 'todo-item',

         initialize:function(){
            this.listenTo(this.model,'change',this.render);
            this.listenTo(this.model,'destroy',this.remove)
         },
         render:function(){
             //console.log('model is change')
             var json =  this.model.toJSON()
             console.log(json)
             this.$el.html('<h3>'+json.title+'</h3><p>'+json.description+'</p><button>删除</button>');
             return this;
         },
         events:{
             'click button':'handleElClick',
             'dblclick':'handleElClick1'

         },
         handleElClick:function(){
             console.log('click')
             //this.remove()
             this.model.destroy()
         },
         handleElClick1:function(){
             console.log('双击事件')
         },
         handleElClick3:function(){
             console.log('p span')
         }
     });
     var todoItemview = new ToDoItemView({
         model:toDoItem
       //  el:"#p1"
     });
     var todoItemview2 = new ToDoItemView({
         model:toDoItem2
         //el:"#p2"
     });
//     todoItemview.listenTo(toDoItem,'change',function(){
//         console.log('todoItemview receive change')
//     })
     todoItemview.render().$el.appendTo($('body'))
     todoItemview2.render().$el.appendTo($('body'))
 </script>
</html>